<template>
  <div class="common-layout">
    <el-container>
      <el-main>
        <!-- 消息提示 -->
        <el-card class="box-card mb-20">
          <template #header>
            <div class="card-header">
              <span>消息提示 (Message)</span>
            </div>
          </template>

          <div class="message-example">
            <p class="section-description">用于主动操作后的反馈提示，包含成功、警告、错误等类型</p>
            <div class="button-group">
              <el-button @click="openMessage('info')">消息提示</el-button>
              <el-button type="success" @click="openMessage('success')">成功提示</el-button>
              <el-button type="warning" @click="openMessage('warning')">警告提示</el-button>
              <el-button type="danger" @click="openMessage('error')">错误提示</el-button>
              <el-button @click="openCustomMessage">自定义提示</el-button>
            </div>
          </div>
        </el-card>

        <!-- 通知提示 -->
        <el-card class="box-card mb-20">
          <template #header>
            <div class="card-header">
              <span>通知提示 (Notification)</span>
            </div>
          </template>

          <div class="notification-example">
            <p class="section-description">用于系统主动推送的通知，可以包含标题、内容和操作按钮</p>
            <div class="button-group">
              <el-button @click="openNotification('info')">消息通知</el-button>
              <el-button type="success" @click="openNotification('success')">成功通知</el-button>
              <el-button type="warning" @click="openNotification('warning')">警告通知</el-button>
              <el-button type="danger" @click="openNotification('error')">错误通知</el-button>
              <el-button @click="openPositionNotification">不同位置通知</el-button>
              <el-button @click="openCustomNotification">自定义通知</el-button>
            </div>
          </div>
        </el-card>

        <!-- 警告提示 -->
        <el-card class="box-card mb-20">
          <template #header>
            <div class="card-header">
              <span>警告提示 (Alert)</span>
            </div>
          </template>

          <div class="alert-example">
            <p class="section-description">用于页面中展示重要的提示信息</p>
            <el-alert title="消息提示" type="info" show-icon class="mb-10" />
            <el-alert title="成功提示" type="success" show-icon class="mb-10" />
            <el-alert title="警告提示" type="warning" show-icon class="mb-10" />
            <el-alert title="错误提示" type="error" show-icon class="mb-10" />

            <el-alert
              title="带有描述的提示"
              type="success"
              description="这是一段描述信息，用于进一步解释提示内容"
              show-icon
              class="mb-10"
            />

            <el-alert
              title="可关闭的提示"
              type="warning"
              closable
              class="mb-10"
            />

            <el-alert
              title="自定义关闭按钮"
              type="info"
              :closable="false"
              class="mb-10"
            >
              <template #close>
                <el-button size="small" type="primary">知道了</el-button>
              </template>
            </el-alert>
          </div>
        </el-card>

        <!-- 弹窗提示 -->
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <span>弹窗提示 (MessageBox)</span>
            </div>
          </template>

          <div class="messagebox-example">
            <p class="section-description">用于重要操作的确认提示或复杂的交互场景</p>
            <div class="button-group">
              <el-button @click="openConfirmDialog">确认操作</el-button>
              <el-button @click="openAlertDialog">警告提示</el-button>
              <el-button @click="openPromptDialog">输入对话框</el-button>
              <el-button @click="openCustomDialog">自定义对话框</el-button>
            </div>

            <!-- 自定义对话框 -->
            <el-dialog v-model="dialogVisible" title="自定义对话框" width="30%">
              <div class="dialog-content">
                <p>这是一个自定义对话框的内容。</p>
                <el-form :model="dialogForm" label-width="100px">
                  <el-form-item label="名称">
                    <el-input v-model="dialogForm.name" placeholder="请输入名称" />
                  </el-form-item>
                  <el-form-item label="说明">
                    <el-input v-model="dialogForm.description" type="textarea" placeholder="请输入说明" />
                  </el-form-item>
                </el-form>
              </div>
              <template #footer>
                <span class="dialog-footer">
                  <el-button @click="dialogVisible = false">取消</el-button>
                  <el-button type="primary" @click="handleDialogSubmit">确认</el-button>
                </span>
              </template>
            </el-dialog>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { 
  ElMessage, 
  ElMessageBox, 
  ElNotification 
} from 'element-plus'

// 消息提示
const openMessage = (type) => {
  const messages = {
    info: '这是一条消息提示',
    success: '操作成功完成',
    warning: '请注意此操作的风险',
    error: '操作失败，请重试'
  }
  
  ElMessage({
    message: messages[type],
    type,
    showClose: true
  })
}

const openCustomMessage = () => {
  ElMessage({
    message: '这是一条自定义消息',
    duration: 5000,
    showClose: true,
    offset: 100,
    icon: 'el-icon-bell',
    customClass: 'custom-message'
  })
}

// 通知提示
const openNotification = (type) => {
  const messages = {
    info: '这是一条通知消息',
    success: '操作已成功完成',
    warning: '警告：此操作存在风险',
    error: '操作失败，请检查后重试'
  }
  
  ElNotification({
    title: type.charAt(0).toUpperCase() + type.slice(1) + '通知',
    message: messages[type],
    type,
    duration: 3000
  })
}

const openPositionNotification = () => {
  const positions = ['top-right', 'top-left', 'bottom-right', 'bottom-left']
  
  positions.forEach((position, index) => {
    setTimeout(() => {
      ElNotification({
        title: '不同位置通知',
        message: `这是一条显示在 ${position} 的通知`,
        position,
        type: 'info'
      })
    }, index * 500)
  })
}

const openCustomNotification = () => {
  ElNotification({
    title: '自定义通知',
    message: '这是一条带有自定义内容的通知',
    duration: 0,
    showClose: true,
    type: 'success',
    onClick: () => {
      console.log('通知被点击')
      ElMessage.info('你点击了通知')
    }
  })
}

// 弹窗提示
const openConfirmDialog = () => {
  ElMessageBox.confirm(
    '此操作将永久删除该数据, 是否继续?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '删除成功!'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消删除'
      })
    })
}

const openAlertDialog = () => {
  ElMessageBox.alert(
    '这是一条重要的系统消息，请仔细阅读',
    '系统通知',
    {
      confirmButtonText: '我知道了',
      type: 'info',
      callback: () => {
        ElMessage({
          type: 'info',
          message: '你已确认阅读此消息'
        })
      }
    }
  )
}

const openPromptDialog = () => {
  ElMessageBox.prompt(
    '请输入您的反馈意见',
    '用户反馈',
    {
      confirmButtonText: '提交',
      cancelButtonText: '取消',
      inputPattern: /\S+/,
      inputErrorMessage: '反馈意见不能为空'
    }
  )
    .then(({ value }) => {
      ElMessage({
        type: 'success',
        message: `您的反馈已提交: ${value}`
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消提交'
      })
    })
}

// 自定义对话框
const dialogVisible = ref(false)
const dialogForm = reactive({
  name: '',
  description: ''
})

const openCustomDialog = () => {
  dialogVisible.value = true
}

const handleDialogSubmit = () => {
  ElMessage({
    type: 'success',
    message: `表单已提交，名称: ${dialogForm.name}`
  })
  dialogVisible.value = false
}
</script>

<style scoped>
.mb-20 {
  margin-bottom: 20px;
}
.mb-10 {
  margin-bottom: 10px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section-description {
  margin-bottom: 15px;
  color: #666;
}
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 15px;
}
.dialog-content {
  margin-bottom: 20px;
}
</style> 